<template>
    <div class="teamattestationmsg">
        <pagetitle></pagetitle>
        <el-form :model="pageData" class="demo-form-inline" label-width="140px" :disabled="$route.query.join ? true : false">
            <el-card class="pageCard">
                <div class="cardTitle">团队主体信息</div>
                <el-form-item label="团队名称：">
                    <div class="formItems">
                        <el-input v-model="pageData.companyName" class="inputs" placeholder="实名认证团队的全称"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="团队简称：">
                    <div class="formItems">
                        <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="实名认证团队的简称"></el-input>
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">团队标志信息</div>
                <el-form-item label="团队LOGO：">
                    <div>
                        <uploadFile :fileUrl="pageData.headPortrait" tableItem="headPortrait" text="团队LOGO" width="140px" height="140px" iconSize="28"></uploadFile>
                        <div>
                            <div class="certificateInputTip">● 图片格式要求jpg、jpeg、bmp、png、pdf，不超过10M。</div>
                            <div class="certificateInputTip">● 为更好的服务，证件仅仅用于平台验证用户真实性，其他用户无法查看和下载。</div>
                        </div>
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">创建人在团队中的岗位</div>
                <el-form-item label="您的身份：">
                    <div>
                        <el-radio-group v-model="pageData.certificateType" size="large">
                            <div class="radiobutton" v-for="(item, index) in cardType" :key="index">
                                <el-radio-button :label="item" />
                            </div>
                        </el-radio-group>
                        <div class="certificateInputTips" style="font-size: 12px">声明：在整个 <u>实名认证</u> 过程中，该 <u>被授权人</u> 的一切行为，均代表本单位，与本单位的行为具有同等法律效力。本单位将承担该代理</div>
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">团队法人信息</div>
                <el-form-item label="法定代表人姓名：">
                    <el-input v-model="pageData.companyName" class="inputs" placeholder="请输入法定代表人的姓名"></el-input>
                </el-form-item>
                <el-form-item label="法人联系电话：">
                    <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请输入法人电话号码"></el-input>
                    <span class="formItemsspan">*联系电话必须为法人本人</span>
                </el-form-item>
                <el-form-item label="法人身份证号：">
                    <el-input v-model="pageData.companyPresentation" class="inputs" placeholder="请输入法人身份证号码"></el-input>
                    <span class="formItemsspan">*若法定代表人为非中国大陆居民，请填写办理企业证件使用的有效证件号码</span>
                </el-form-item>
                <el-form-item label="个人证件：">
                    <div>
                        <div class="uploadcertificate">
                            <div class="uploadcertificateItem">
                                <div class="uploadcertificateTitle">居民身份证正面照片</div>
                                <uploadFile :fileUrl="pageData.cardPositive" tableItem="cardPositive" width="240px" height="150px" :showIcon="false"></uploadFile>
                            </div>
                            <div class="uploadcertificateItem">
                                <div class="uploadcertificateTitle">居民身份证反面照片</div>
                                <uploadFile :fileUrl="pageData.cardBack" tableItem="cardBack" width="240px" height="150px" :showIcon="false"></uploadFile>
                            </div>
                            <div class="uploadcertificateItem">
                                <div class="uploadcertificateTitle">手持居民身份证正面照片</div>
                                <uploadFile :fileUrl="pageData.cardHold" tableItem="cardHold" width="240px" height="150px" :showIcon="false"></uploadFile>
                            </div>
                        </div>
                        <div class="certificateInputTip">● 图片格式要求jpg、jpeg、bmp、png、pdf，不超过10M。</div>
                        <div class="certificateInputTip">● 可以添加“云上农场备案、服务申请、服务认证、服务备案”等水 印；但不能遮挡关键信息，例如姓名、证件号。</div>
                        <div class="certificateInputTip">● 为更好的服务，证件仅仅用于平台验证用户真实性，其他用户无法查看和下载。</div>
                        <div class="certificateInputTips">声明：在整个 <u>实名认证</u> 过程中，该 <u>被授权人</u> 的一切行为，均代表本单位，与本单位的行为具有同等法律效力。本单位将承担该代理</div>
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">统一社会信用代码信息</div>
                <el-form-item label="统一社会信用代码：">
                    <el-input v-model="pageData.companyName" class="inputs" placeholder="请输入团队的组织机构代码"></el-input>
                    <span class="formItemsspan">*团队的 统一社会信用代码 是平台注册后不能变更，请准确输入</span>
                </el-form-item>
                <el-form-item label="团队证件：">
                    <div>
                        <div class="uploadcertificateItem uploadcertificateItem1">
                            <uploadFile :fileUrl="pageData.cardPositive" tableItem="cardPositive" width="240px" height="150px" :showIcon="false"></uploadFile>
                        </div>
                        <div class="certificateInputTip">● 图片格式要求jpg、jpeg、bmp、png、pdf，不超过10M。</div>
                        <div class="certificateInputTip">● 可以添加“云上农场备案、服务申请、服务认证、服务备案”等水 印；但不能遮挡关键信息，例如姓名、证件号。</div>
                        <div class="certificateInputTip">● 为更好的服务，证件仅仅用于平台验证用户真实性，其他用户无法查看和下载。</div>
                    </div>
                </el-form-item>
                <el-form-item label="团队注册地址：">
                    <div>
                        <addRess :value="pageData.addressCode" class="inputs"></addRess>
                        <div class="addressinput">
                            <el-input v-model="pageData.add" class="inputs" placeholder="请输入具体的组、社、地名等信息" />
                        </div>
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">申请人组织机构类型</div>
                <el-form-item label="机构类型：">
                    <el-tag class="mx-1 formitemtag" size="large" type="info">企业单位 / 有限责任公司 / 自然人投资或控股</el-tag>
                    <span class="formitemtagspan">*参考标准：GB/T 20091-2006 组织机构类型</span>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">申请人产业分类</div>
                <el-form-item label="">
                    <el-tag class="mx-1 formitemtag" size="large" closable type="info">科学研究和技术服务业/专业技术服务业/检测服务 </el-tag>
                    <el-tag class="mx-1 formitemtag" size="large" closable type="info">科学研究和技术服务业/专业技术服务业/检测服务 </el-tag>
                    <el-tag class="mx-1 formitemtag" size="large" closable type="info">科学研究和技术服务业/专业技术服务业/检测服务 </el-tag>
                    <el-tag class="mx-1 formitemtag" size="large" closable type="info">科学研究和技术服务业/专业技术服务业/检测服务 </el-tag>
                    <el-tag class="mx-1 formitemtag" size="large" closable type="info">科学研究和技术服务业/专业技术服务业/检测服务 </el-tag>
                    <el-tag class="mx-1 formitemtag" size="large" closable type="info">科学研究和技术服务业/专业技术服务业/检测服务 </el-tag>
                    <span class="formitemtagspan">*参考标准：GB/T 4754—2017 国民经济行业分类</span>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="cardTitle">联系人信息</div>
                <el-form-item label="您的身份：">
                    <el-radio-group v-model="pageData.certificateType" size="large">
                        <div class="radiobutton" v-for="(item, index) in cardType1" :key="index">
                            <el-radio-button :label="item" />
                        </div>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="联系人名字：">
                    <el-input v-model="pageData.companyName" class="inputs" placeholder="请输入联系人名字"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话：">
                    <el-input v-model="pageData.companyName" class="inputs" placeholder="请输入联系人电话"></el-input>
                </el-form-item>
                <el-form-item label="联系人地址：">
                    <div>
                        <addRess :value="pageData.addressCode" class="inputs"></addRess>
                        <div class="addressinput">
                            <el-input v-model="pageData.add" class="inputs" placeholder="请输入具体的组、社、地名等信息" />
                        </div>
                    </div>
                </el-form-item>
            </el-card>
            <el-card class="pageCard">
                <div class="pageCardTitleBox">
                    <div class="cardTitle">申请人位置</div>
                    <div class="cardTitletip">*请准确输入申请人注册位置</div>
                </div>
                <!-- <el-form-item label=""> -->
                <div class="mars3ds">
                    <mars3d ref="mars3ds" :lngLat="baseLatLng" :isAdd="isAdd" :linkBtn="linkBtn" :baseId="cacheId" @cacheData="cacheData" height="100%" :key="bigemapKey"></mars3d>
                </div>
                <!-- <div class="pageBtns"></div> -->
                <div class="subpageBtnBox">
                    <el-button type="primary" plain @click="dialogVisible = true">认证通过</el-button>
                    <el-button type="primary" plain @click="dialogVisible1 = true">认证不通过</el-button>
                    <el-button type="primary" plain @click="router.back()">返回</el-button>
                </div>
                <!-- </el-form-item> -->
            </el-card>
            <!-- <el-card class="pageCard">
                <div class="pageBtns">
                    <el-button type="primary" round plain>认证通过</el-button>
                    <el-button type="primary" round plain>认证不通过</el-button>
                    <el-button type="primary" round plain @click="router.back()">返回</el-button>
                </div>
            </el-card> -->
        </el-form>
        <!-- 认证通过 -->
        <el-dialog v-model="dialogVisible" title="团队认证 审核通过" width="600px" center :show-close="false">
            <div class="dialogCenter">
                <el-icon color="#23b14d" size="48px"><CircleCheckFilled /></el-icon>
                <div class="dialogCentertext">
                    团队认证 申请平台审核 <span>已经通过</span>
                    <p>您审核通过<span> XXXX公司 </span>的 团队认证审核，开通团队功能。</p>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" plain round @click="dialogVisible = false">发送消息</el-button>
                    <el-button type="primary" plain round @click="dialogVisible = false"> 返回 </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 认证不通过 -->
        <el-dialog v-model="dialogVisible1" title="消 息" width="600px" center :show-close="false">
            <div class="dialogCenter">
                <div class="dialogCentercheckbox">
                    <div class="dialogCentertitle">在 团队认证 过程中，因为您提供的：</div>
                    <div class="dialogCentercheckboxItem">
                        <el-checkbox v-model="pageData.checked1" label="证件模糊；" /><br />
                        <el-checkbox v-model="pageData.checked1" label="证件号码与输入号码不一致；" /><br />
                        <el-checkbox v-model="pageData.checked1" label="无法确认是否本人手持证件照；" /><br />
                        <el-checkbox v-model="pageData.checked1" label="无法确认是否本人手持证件照；" /><br />
                        <el-checkbox v-model="pageData.checked1"> <input type="text" class="dialogInput" placeholder="请输入其他原因" />。 </el-checkbox>
                    </div>
                    <div class="dialogCenterTip">造成 <span>团队实名认证</span> 未能通过，请核实后再提交申请。</div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" plain round @click="dialogVisible1 = false">认证不通过</el-button>
                    <el-button type="primary" plain round @click="dialogVisible1 = false"> 返回 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import mars3d from "@/components/mars3d.vue";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";

const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const cardType = ref(["法人代表", "授权管理员"]);
const cardType1 = ref(["法人代表", "授权管理员", "其他工作人员"]);
const router = useRouter();
const pageData: any = ref({});
const addResskey: any = ref("");

const baseLatLng = ref([]);
const isAdd = ref(true);
const linkBtn = ref(true);
const cacheId = ref("");
const bigemapKey = ref(new Date().getTime());
const cacheData = (e: any) => {
    console.log(e);
};
const uploadFiles = (e: any, t: any) => {};
const uploadFileUrl = (e: any, t: any) => {};
const getAreaData = (e: any, t: any) => {};
</script>
<style lang="scss" scoped>
.pageCard {
    margin-bottom: 20px;
    .pageCardTitleBox {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .cardTitle {
        font-size: 16px;
        font-weight: bold;
        color: #252b3a;
        margin-bottom: 30px;
        width: 160px;
    }
    .cardTitletip {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 22px;
    }
    .inputs {
        width: 505px;
        margin-right: 10px;
    }
    .pageBtns {
        // padding-left: 130px;
        margin-top: 20px;
    }
    .formItemsspan {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        margin-left: 10px;
    }
    .certificateInputTip {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 22px;
    }
    .formitemtag {
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .selectBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .selectItem {
            width: 162px;
        }
    }
    .formitemtagspan {
        font-size: 12px;
        margin-top: -12px;
        color: #999999;
    }
    .formItemTipsBox {
        width: 747px;
        margin-right: 10px;
    }
    .certificateInputTips {
        font-size: 12px;
        font-weight: 400;
        color: #f11212;
        margin-top: 10px;
    }
    .addressinput {
        margin-top: 10px;
    }
    .uploadcertificate {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        margin-bottom: 10px;
        .uploadcertificateItem {
            margin-right: 30px;
            background-repeat: no-repeat;
            background-size: 154px 97px;
            background-position: 50% 70%;
            &:nth-child(1) {
                background-image: url(@/assets/image/card2.png);
            }
            &:nth-child(2) {
                background-image: url(@/assets/image/card1.png);
            }
            &:nth-child(3) {
                background-image: url(@/assets/image/card3.png);
            }
            .uploadcertificateTitle {
                text-align: center;
                font-size: 14px;
                color: #666666;
                margin-bottom: 10px;
            }
        }
    }
    .uploadcertificateItem1 {
        background-image: url(@/assets/image/team1.png);
        background-repeat: no-repeat;
        background-size: 154px 97px;
        background-position: 8% 53%;
        margin-bottom: 10px;
    }
    .mars3ds {
        width: 100%;
        height: 516px;
    }
}
.dialogCenter {
    text-align: center;
    .dialogCentertext {
        margin-top: 20px;
        font-size: 16px;
        span {
            color: #ff0000;
        }
        p {
            font-size: 14px;
            margin-top: 10px;
        }
    }
    .dialogCentertitle {
        font-size: 16px;
        margin-bottom: 20px;
        text-align: left;
    }
    .dialogCentercheckbox {
        width: 444px;

        position: relative;
        left: 50%;
        transform: translateX(-50%);
        .dialogCentercheckboxItem {
            // height: 227px;
            border: 1px solid #cccccc;
            margin-bottom: 10px;
            text-align: left;
            padding-left: 50px;
            padding-top: 20px;
            padding-bottom: 20px;
            .dialogInput {
                background: none;
                border: none;
                border-bottom: 1px solid #cccccc;
                width: 330px;
            }
        }
        .dialogCenterTip {
            text-align: left;
            color: #666666;
            font-size: 14px;
            span {
                color: #333333;
            }
        }
    }
}
</style>
<style>
.teamattestationmsg .radiobutton {
    width: 162px;
    height: 30px;
    border-radius: 4px;
    margin-right: 10px;
}
.teamattestationmsg .radiobutton .el-radio-button .el-radio-button__inner {
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0;
    width: 162px;
    border: none;
    background: #f1f1f1;
}
.teamattestationmsg .radiobutton .el-radio-button.is-active .el-radio-button__inner {
    background: #23b14d;
}
</style>
